<template>
  <page-header-wrapper v-if="!isInvit">
    <a-card :bordered="false">
      <div class="table-operator">
        <a-form layout="inline">
          <a-form-item>
            <a-input placeholder="输入手机号/名称" v-model="queryParam.search"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
          </a-form-item>
          <a-form-item style="float: right">
            <!-- <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button> -->
          </a-form-item>
        </a-form>
      </div>
      <div class="tabletitle">无门店乐管家</div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="pagination"
        :pageSize="5"
      >
        <template slot="head_img" slot-scope="text">
          <a-avatar shape="square" :size="32" icon="user" :src="text" />
        </template>
        <a-badge
          :status="checkStatusDisplay(text)"
          slot="status"
          slot-scope="text"
          :text="text | checkStatusFilter"
        ></a-badge>
        <span slot="action" slot-scope="text, record">
          <template v-if="record.status == 2">
            <a @click="handlePut(record)">审核通过</a>
            <a-divider type="vertical" />
            <a @click="handleDown(record)" style="color: #f5222d">审核驳回</a>
            <template v-if="!record.store_id">
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">绑定门店</a>
            </template>
          </template>
          <template v-if="record.status == 1">
            <a @click="handleDown(record)" style="color: #f5222d">审核驳回</a>
            <a-divider type="vertical" />
            <a @click="lookInvit(record)">邀请的人</a>
          </template>
          <a-divider type="vertical" />
          <a @click="viewHandle(record)">详情</a>
        </span>
      </s-table>
    </a-card>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-form layout="inline">
          <a-form-item>
            <a-input placeholder="输入手机号/名称" v-model="queryParam1.search"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch1(true)" icon="search">查询</a-button>
          </a-form-item>
          <a-form-item style="float: right">
            <!-- <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button> -->
          </a-form-item>
        </a-form>
      </div>
      <div class="tabletitle">有门店乐管家</div>
      <s-table
        ref="table1"
        size="default"
        rowKey="id"
        :columns="columns1"
        :data="loadData1"
        showPagination="auto"
        :pagination="pagination"
        :pageSize="5"
        :apply_status="1"
      >
        <template slot="head_img" slot-scope="text">
          <a-avatar shape="square" :size="32" icon="user" :src="text" />
        </template>
        <a-badge
          :status="checkStatusDisplay(text)"
          slot="status"
          slot-scope="text"
          :text="text | checkStatusFilter"
        ></a-badge>
        <span slot="action" slot-scope="text, record">
          <template v-if="record.apply_status == 2">
            <a @click="handlePut1(record)">审核通过</a>
          </template>
          <template v-if="record.status != 3">
            <a-divider type="vertical" />
            <a @click="handleDown1(record)" style="color: #f5222d">审核驳回</a>
          </template>
          <template v-if="record.status == 1">
            <!-- <a @click="handleDown1(record)" style="color: #f5222d">审核驳回</a> -->
            <a-divider type="vertical" />
            <a @click="lookInvit(record)">邀请的人</a>
          </template>
          <a-divider type="vertical" />
          <a @click="viewHandle(record)">详情</a>
        </span>
      </s-table>
    </a-card>
    <create-form ref="createModal" @ok="handleSearch" />
    <steward-drawer ref="stewardDrawer" />
  </page-header-wrapper>
  <inviteUser v-else :dataSource="stewardInvitUser" ref="invit" @back="isInvit = false" />
</template>

<script>
import {
  userStewardList,
  stewardPutaway,
  stewardDownfall,
  stewardInvitUser,
  stewardlevelDownfall,
  stewardlevelPutaway,
} from '@/api/stat'
import { STORE_TYPE_MAP } from '@/mixins/storeType'
import CreateForm from './modules/StewardForm'
import formTableMixin from '@/mixins/formTableMixin'
import inviteUser from '@/views/store/InviteUser'
import stewardDrawer from './modules/StewardDrawer.vue'
const columns = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' },
  },
  {
    title: '昵称',
    dataIndex: 'name',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '家庭住址',
    dataIndex: 'family_address',
  },
  // {
  //   title: '申请地址',
  //   dataIndex: 'apply_address',
  // },
  {
    title: '备注',
    dataIndex: 'brief',
  },
  {
    title: '所属门店',
    dataIndex: 'store.name',
  },
  {
    title: '门店类型',
    dataIndex: 'store_type',
    customRender(text) {
      return STORE_TYPE_MAP[text]
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '300px',
    scopedSlots: { customRender: 'action' },
  },
]
const columns1 = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' },
  },
  {
    title: '昵称',
    dataIndex: 'name',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '家庭住址',
    dataIndex: 'family_address',
  },
  {
    title: '申请地址',
    dataIndex: 'apply_address',
  },
  {
    title: '备注',
    dataIndex: 'brief',
  },
  {
    title: '所属门店',
    dataIndex: 'store.name',
  },
  {
    title: '门店类型',
    dataIndex: 'store_type',
    customRender(text) {
      return STORE_TYPE_MAP[text]
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '300px',
    scopedSlots: { customRender: 'action' },
  },
]
const CHECK_STATUS_MAP = {
  1: '乐管家',
  2: '审核中',
  3: '已拒绝',
  4: '已过期',
}

const CHECK_STATUS_DISPLAY = {
  1: 'success',
  2: 'processing',
  3: 'error',
  4: 'error',
}

export default {
  name: 'StewardList',
  mixins: [formTableMixin],
  components: {
    CreateForm,
    inviteUser,
    stewardDrawer,
  },
  data() {
    this.columns = columns
    this.columns1 = columns1
    this.listAction = userStewardList
    return {
      isInvit: false,
      stewardInvitUser,
      title: '',
    }
  },
  filters: {
    checkStatusFilter(status) {
      return CHECK_STATUS_MAP[status]
    },
  },
  methods: {
    viewHandle(record) {
      this.$refs.stewardDrawer.open(record)
    },
    checkStatusDisplay(status) {
      return CHECK_STATUS_DISPLAY[status]
    },
    async lookInvit(record) {
      this.isInvit = true
      this.stewardInvitUser = (parameters) => {
        const newParams = { ...parameters, user_id: record.id }
        return stewardInvitUser(newParams)
      }
      await this.$nextTick()
      this.$refs.invit.title = record.name + '邀请的人'
    },
    handlePut(record) {
      this.$confirm({
        title: '您确定要审核通过吗?',
        content: `审核通过后该用户将成为乐管家`,
        okText: '通过',
        onOk: () => {
          return stewardPutaway({ id: record.id })
            .then((res) => {
              this.$message.success(res.msg)
            })
            .catch(() => null)
        },
      })
    },
    handlePut1(record) {
      this.$confirm({
        title: '您确定要审核通过吗?',
        content: `审核通过后该用户将成为乐管家`,
        okText: '通过',
        onOk: () => {
          return stewardlevelPutaway({ id: record.id })
            .then((res) => {
              this.$message.success(res.msg)
            })
            .catch(() => null)
        },
      })
    },
    handleDown(record) {
      this.$confirm({
        title: '您确定要拒绝审核吗?',
        content: '审核驳回后该用户可继续申请审核',
        okText: '驳回',
        okType: 'danger',
        onOk: () => {
          return stewardDownfall({ id: record.id })
            .then((res) => {
              this.$message.success(res.msg)
            })
            .catch(() => null)
        },
      })
    },
    handleDown1(record) {
      this.$confirm({
        title: '您确定要拒绝审核吗?',
        content: '审核驳回后该用户可继续申请审核',
        okText: '驳回',
        okType: 'danger',
        onOk: () => {
          return stewardlevelDownfall({ id: record.id })
            .then((res) => {
              this.$message.success(res.msg)
            })
            .catch(() => null)
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
.tabletitle {
  color: rgba(0, 0, 0, 0.85);
  font-size: 18px;
  font-weight: bold;
  margin: 16px 0;
}
</style>
